<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuip adhoc tests</title>
</head>
<body>
  <h1>Find tests</h1>

  <i id="i1" class="a">i1</i>
  <i id="i2" class="b">i2</i>
  <i id="i3" class="a">i3</i>
  <i id="i4" class="b">i4</i>
  <i id="i5" class="a c">i5</i>
  <form id="f1" class="a">
    <i id="i6" class="a b c d e">i6</i>
    <i id="i7" class="b">i7</i>
    <input name="a" value="a" id="in1" class="c" />
    <input name="a" value="b" id="in2" class="c" />
    <div id="d1" class="n" data-attr="meta">
      <i id="i8" class="d">i8</i>
      <i id="i9" class="d">i9</i>
    </div>
  </form>
  <input name="a" value="b" id="in3" class="d" />
  <input name="b" value="b" id="in4" class="d" />
  <i id="i10" class="b c d e f g">i10</i>
  <textarea id="t1"></textarea>

  <div id="append"></div>

<script type="text/javascript" src="../src/jquip.js"></script>
<script>
  function ids(els) {
    var sb = "";
    for (var i=0; i<els.length;i++) {
      if (sb) sb += ",";
      sb += els[i].id;
    }
    return sb;
  }
  function test(rule, expected) {
    var actual = ids($.query(rule,document));
    eq(actual, expected, rule);
  }
  function eq(actual, expected, rule){
    console.log((actual == expected ? "OK " : "FAIL was " + actual + " > ") + rule);
  }

  test(".a", "i1,i3,i5,f1,i6");
  test(".c", "i5,i6,in1,in2,i10");
  test(".a.c", "i5,i6");
  test(".b.c.d", "i6,i10");
  test(".b.c.d.e.f.g", "i10");
  test("form.a", "f1");
  test("form#f1.a", "f1");
  test("input[name=a]", "in1,in2,in3");
  test("input[name='a']", "in1,in2,in3");
  test("input[name]", "in1,in2,in3,in4");
  test("form input[name='a']", "in1,in2");
  test("form#f1.a input[name='a']", "in1,in2");
  test("form#f1.a .n .d", "i8,i9");
  test("#f1.a .n .d", "i8,i9");
  test("textarea", "t1");

  var input = $("<p>text</p>").appendTo("#append").html();
  eq(input, "text", '.appendTo("#append")');
  var $append = $("#append");
  input = $("<p>text</p>").appendTo($append).html();
  eq(input, "text", '.appendTo($append)');

  var $form = $("#f1");
  eq(ids($form.find("#i7")), "i7",'$form.find("#i7")');
  eq(ids($form.find(".b")), "i6,i7",'$form.find(".b")');
  eq(ids($form.find(".d")), "i6,i8,i9",'$form.find(".d")');
  eq(ids($form.find("input")), "in1,in2",'$form.find("input")');
  eq(ids($form.find("input[value=b]")), "in2",'$form.find("input[value=b]")');
  eq(ids($form.find("input[value=none]")), "",'$form.find("input[value=none]")');
  eq(ids($form.find("div[data-attr=meta]")), "d1",'$form.find("div[data-attr=meta]")');
  eq(ids($form.find("*[data-attr=meta]")), "d1",'$form.find("*[data-attr=meta]")');
  eq(ids($form.find("[data-attr=meta]")), "",'$form.find("[data-attr=meta]")');

</script>
</body>
</html>